<template>
  <div class="w-full flex justify-between items-center"
       :class="[prop.easymodel?'border-0 border-b-2':'border rounded border-gray-300',
       jiaodian?prop.easymodel?'border-black':'border-blue-400 fulloutshaw':'',...heightclass]">
    <!--    前缀-->
    <div class="flex-initial h-full px-1 juzhong">
      <slot name="qianzhui"></slot>
    </div>
    <!--    中间-->
    <div class="flex-1 h-full juzhong relative">
      <input :type="prop.type" :placeholder="prop.placeholder" class="border-0 focus:ring-0 outline-none flex-1 h-full"
             @focus="getfocus" :value="modelValue" ref="inputref" :maxlength="maxlength"
             @blur="losefocus" @input="inputcall" @change="changecall">
      <div class="h-full flex-initial juzhong bg-opacity-0" v-if="prop.maxlength || clearable">
        <span v-if="prop.maxlength" class="text-sm text-gray-300 mx-1">{{ strlength }}/{{ prop.maxlength }}</span>
        <Icon class="hover:text-red-500 active:text-blue-500 cursor-pointer text-gray-500" v-if="clearable" @click="qingkong">
          <CloseCircle></CloseCircle>
        </Icon>
      </div>
    </div>
    <!--    后缀-->
    <div class="flex-initial h-full px-1 juzhong">
      <slot name="houzhui"></slot>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, defineEmits, defineProps, nextTick, computed,watch} from "vue"
import {useStore} from "vuex"
import {useRoute, useRouter} from "vue-router"
import {Icon} from '@vicons/utils' // 外壳
import {CloseCircle} from '@vicons/ionicons5'   // 图标主体
const router = useRouter()
const route = useRoute()
const store = useStore()
// input标签
const inputref = ref(null)

const prop = defineProps({
  type: {
    type: String,
    default: "text",
    validator(value) {
      return ["text", "email", "url", "password", "number", "tel", "search"].includes(value)
    }
  },
  easymodel: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  size: {
    type: String,
    default: "middle",
    validator(value) {
      return ["large", "middle", "mini"].includes(value)
    }
  },
  clear: {
    type: Boolean,
    default: false,
  },
  // v-model
  modelValue: {
    type: String,
    default: "",
  },
  maxlength: {
    type: Number,
    default: null,
  },
})
const emit = defineEmits(["input", "update:modelValue", "change", "focus", "blur","clear"])
// 焦点状态的改变
const jiaodian = ref(false)
const getfocus = () => {
  jiaodian.value = true
  emit("focus")
}
const losefocus = () => {
  jiaodian.value = false
  emit("blur")
}
// 初始化的时候，获取高度
const heightclass = ref([])
const init = () => {
  switch (prop.size) {
    case "middle":
      heightclass.value = [...heightclass.value, "h-9"]
      break
    case "mini":
      heightclass.value = [...heightclass.value, "h-7"]
      break
    case "large":
      heightclass.value = [...heightclass.value, "h-10"]
      break
  }
}


// 清除状态
const clearable = computed(() => {
  return prop.clear && prop.modelValue
})
const qingkong = () => {
  emit("update:modelValue", "")
  emit("clear")
}
// input和change的回调函数
const inputcall = (e) => {
  emit("input", e.target.value)
  emit("update:modelValue", e.target.value)
}

const changecall = (e) => {
  emit("change", e.target.value)
}

// 主动获取焦点和主动失去焦点
const focus = () => {
  inputref.value.focus()
}
const blur = () => {
  inputref.value.blur()
}

// 字数统计
const strlength = ref(0)
watch(() => prop.modelValue, () => {
  strlength.value = prop.modelValue.length
})

// 初始化区域
init()
</script>

<style scoped>

</style>